<template>
	<view class="item">
		<view class="item-con">
			<!-- 1，时间 -->
			<!-- <view class="chat-time" v-if="chatItem.time != ''">{{computeDate(chatItem.time,chatItemIndex)}}</view> -->
			<view class="chat-time">
				<slot name="chatTime"></slot>
			</view>
				
			<!-- 2，系统消息 -->
			<view class="chat-system" v-if="chatItem.msgType == 6 || chatItem.msgType == 7 
				|| chatItem.msgType == $chatType.ESTOPPEL || chatItem.msgType == $chatType.PROTECT">
				<view>{{chatItem.news}}</view>
			</view>
			

			<view class="chat-system" v-else-if="chatItem.msgType == $chatType.KICK_OUT_USER">
				<view>{{JSON.parse(chatItem.news).msg }}</view>
			</view>

			<!-- 3，撤回消息 -->
			<view class="chat-system" v-else-if="chatItem.msgType == 11">
				<view>
					<text v-if="chatItem.sendId == userId">你</text>
					<text v-else>{{chatItem.sendNickname}}</text>
					<text>{{chatItem.news}}</text>
				</view>
			</view>

			<!-- 4，领取红包 -->
			<view class="chat-system" v-else-if="chatItem.msgType == 21">
				<view>
					<text
						v-if="JSON.parse(chatItem.news).robId == userId">我领取了{{JSON.parse(chatItem.news).sendName}}的红包</text>
					<text
						v-else-if="JSON.parse(chatItem.news).sendId == userId">{{JSON.parse(chatItem.news).robName}}领取了{{JSON.parse(chatItem.news).sendName}}的红包</text>
					<text v-else></text>
				</view>
			</view>

			<!-- 5，信息主要内容 -->
			<view v-else class="chat-item" :class="chatItem.sendId == userId ? 'chat-item-right' : 'chat-item-left'">
				<!-- 用户头像 -->
				<view class="chat-item-head">
					<image :src="chatItem.sendHead" @click="gotoUserSet(chatItem)"></image>
				</view>
				<!-- 主要聊天内容 -->
				<view class="chat-msg">
					<view class="chat-nickname" v-if="chatItem.sendId != userId && chatItem.chatType != 2">
						<text>{{chatItem.sendNickname}}</text>
					</view>
					<!-- 1，文字聊天 -->
					<view @longpress="longpressItem" class="msg-content msg-type-1" v-if="chatItem.msgType == 1">
						<text selectable="true">{{chatItem.news}}</text>
					</view>
					<!-- 1。2，文字聊天（艾特） -->
					<view @longpress="longpressItem" class="msg-content msg-type-1" v-if="chatItem.msgType == 31">
						<text
							selectable="true">{{'@' + JSON.parse(chatItem.news).nickname + JSON.parse(chatItem.news).atMsgNew }}</text>
					</view>

					<!-- 2，图片聊天 -->
					<view @longpress="longpressItem" @click="showImg(chatItem)" class="msg-type-2"
						v-if="chatItem.msgType == 2">
						<image @load="imgLoad" :src="chatItem.news" mode="widthFix"></image>
					</view>
					<!-- 3，语音聊天 -->
					<!-- <view @longpress="longpressItem" class="msg-type-3 msg-content" v-if="chatItem.msgType == 3"
						@click="handleAudio(chatItem)"
						:class="[chatItem.sendId != userId ? 'msg-type-3-left' : 'msg-type-3-right']"
						:style="{width:`${100 + (JSON.parse(chatItem.news).time * 2) }rpx`}">
						<view class="msg-content-time">
							<text>{{ JSON.parse(chatItem.news).time }}''</text>
						</view>
						<view class="msg-content-voice" v-if="chatItem.sendId == userId">
							<image :src="require('@/static/img/msg/send/voice-left-3.png')"></image>
							<image :src="require('../static/img/voice/01.gif')"></image>
							<image :src="require('../static/img/voice/02.png')"></image>
						</view>
						<view class="msg-content-voice" v-else>
							<image :src="require('../static/img/voice/02.png')"></image>
							<image :src="require('../static/img/voice/01.gif')"></image>
						</view>
					</view> -->

					<view @longpress="longpressItem" class="msg-type-3 msg-content" v-if="chatItem.msgType == 3"
						:class="[{ 'content-type-right': chatItem.sendId != userId }]" @tap="handleAudio(chatItem)"
						hover-class="contentType2-hover-class"
						:style="{width:`${130+(JSON.parse(chatItem.news).time *2)}rpx`}">
						<view class="voice_icon" :class="[
														{ voice_icon_right: chatItem.sendId == userId },
														{ voice_icon_left: chatItem.sendId != userId },
														{ voice_icon_right_an:JSON.parse(chatItem.news).anmitionPlay && chatItem.sendId == userId },
														{ voice_icon_left_an:JSON.parse(chatItem.news).anmitionPlay && chatItem.sendId != userId }
													]"></view>
						<view class="item.news">{{ JSON.parse(chatItem.news).time }}''</view>
					</view>

					<!-- 4，红包聊天 -->
					<view v-if="chatItem.msgType == 4">
						<chat-red-pkg :chatItem="chatItem" @showRedPkg="showRedPkg"></chat-red-pkg>
					</view>
					<!-- 5，聊天撤回 -->
					<view v-if="chatItem.msgType == 11">
						<view>撤回一条消息</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		handleTime,
		timeago
	} from '@/utils/time/time.js'

	import chatRedPkg from '../common/chat-red-pkg.vue'

	export default {
		components: {
			chatRedPkg
		},
		props: ['chatItem', 'chatItemIndex'],
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				height: 0,
				width: 0
			}
		},
		methods: {
			getTime(time) {
				if (uni.getSystemInfoSync().platform === 'android') {
					//console.log('运行Android上')
					return handleTime(time)
				} else {
					//console.log('运行iOS上')
					return handleTime(time.replace(/-/g, '/'))
				}
			},
			//1，图片详情
			showImg(item) {
				//console.log('图片展示1')
				this.$emit('showImg', item)
			},
			//2，语音播放
			handleAudio(voice) {
				this.$emit("handleAudio", voice)
			},
			//3，图片加载完毕
			imgLoad(e) {
				//console.log(e)
				this.$emit("imgLoad")
			},
			//4，打开红包
			showRedPkg(item) {
				this.$emit("showRedPkg", item)
			},
			//5，跳转用户设置
			gotoUserSet(item) {
				this.$emit("gotoUserSet", item)
			},
			//6，按住聊天
			longpressItem(e) {
				var t = this.chatItem.time
				var afertime = new Date(t.replace(/-/g, "/")); //replace() 替换

				var data = new Date(); //获取当前时间
				var times = data.getTime() - afertime.getTime(); //时间差的毫秒数
				//console.log(times)
				var time = times / 60000
				//console.log(time)
				//超过两分钟无法撤回
				var reqChatItem = this.chatItem
				if (time > 2) {
					reqChatItem.isWithdraw = false
				} else {
					reqChatItem.isWithdraw = true
				}

				this.$emit('longpressItem', e.touches[0], reqChatItem)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-con {
		width: 100%;
		// padding: 12rpx 0;
		// padding-top: 20rpx;

		.chat-nickname {
			margin-left: 28rpx;
			margin-bottom: 15rpx;

			text {
				font-size: 28rpx;
				color: #A9A9A9;
			}
		}

		.chat-system {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #A9A9A9;
		}

		.chat-time {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #A9A9A9;
			margin-bottom: 10rpx;
		}

		.chat-item {
			padding: 10rpx 30rpx;
			display: flex;

			.chat-item-head {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.chat-msg {
				.msg-content {
					padding: 20rpx;
					max-width: 400rpx;
					// border-radius: 10rpx;
					font-size: 28rpx;
					display: flex;
				}

				.msg-type-2 {
					image {
						max-width: 240rpx;
						border-radius: 10rpx;
						margin: 0 28rpx;
					}
				}

				// 语音
				.msg-type-3 {
					flex-direction: row;
					align-items: center;

					.voice_icon {
						height: 34rpx;
						width: 34rpx;
						background-repeat: no-repeat;
						background-size: 100%;
					}

					.voice_icon_right {

						background-image: url(../../../../static/img/msg/send/voice-left-3.png);
						margin-left: 10rpx;
					}

					.voice_icon_left {
						background-image: url(../../../../static/img/msg/send/voice-right-3.png);
						margin-right: 10rpx;
					}

					.voice_icon_right_an {
						animation: voiceAn_right 1s linear alternate infinite;
					}

					.voice_icon_left_an {
						animation: voiceAn_left 1s linear alternate infinite;
					}

					@keyframes voiceAn_right {
						0% {
							background-image: url(../../../../static/img/msg/send/voice-left-1.png);
						}

						50% {
							background-image: url(../../../../static/img/msg/send/voice-left-2.png);
						}

						100% {
							background-image: url(../../../../static/img/msg/send/voice-left-3.png);
						}
					}

					@keyframes voiceAn_left {
						0% {
							background-image: url(../../../../static/img/msg/send/voice-right-1.png);
						}

						50% {
							background-image: url(../../../../static/img/msg/send/voice-right-2.png);
						}

						100% {
							background-image: url(../../../../static/img/msg/send/voice-right-3.png);
						}
					}



					/* display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;


						-webkit-filter: hue-rotate(55deg);
						filter: hue-rotate(55deg);
					} */
				}

				.msg-type-3-left {}

				.msg-type-3-right {
					flex-direction: row-reverse;
				}


			}

		}


		.chat-item-right {
			margin-left: 10%;
			flex-direction: row-reverse;

			.msg-content {
				text-align: right;
				margin-right: 28rpx;
				background-color: #007AFF;
				// color: #fff;
				position: relative;
				word-break: break-all;
				color: #ffffff;
				border-radius: 10rpx;

				&::after {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					border-left: 16rpx solid #007AFF;
					position: absolute;
					right: -16rpx;
					top: 30rpx;
				}
			}


		}

		.chat-item-left {

			.msg-content {
				margin-left: 28rpx;
				background-color: #ffffff;

				word-break: break-all;
				// // line-height: 36rpx;
				position: relative;
				border-radius: 10rpx;

				&::after {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-bottom: 10rpx solid transparent;
					border-right: 16rpx solid #ffffff;
					position: absolute;
					left: -16rpx;
					top: 30rpx;
				}
			}

		}

	}
</style>